<template>
  <div class="allGoods">
    <div>
      <!-- 面包屑导航 -->
      <Bread></Bread>
      <!-- 导航栏 -->
      <el-tabs v-model="categoryActive" type="card">
        <el-tab-pane
          v-for="item in category"
          :key="item.category_id"
          :label="item.category_name"
          :name="''+item.category_id"
        >
        <!-- 全局组件 封装li标签 -->
          <ShopLi :list='allProductList'></ShopLi>
        </el-tab-pane>
      </el-tabs>
      <div class="h1" v-show="total==0">
        <h1>抱歉没有找到相关的商品，请看看其他的商品</h1>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size='pagesize'
      :current-page="currentPage"
      @current-change='handleCurrentChange'
      >
    </el-pagination>
  </div>
</template>

<script>
import ShopLi from '../components/AllShopLi'//引入全局li组价
import Goods from "../miAPI/getCategory";//引入封装的api
import Bread from "../components/Bread";//引入面包屑
export default {
  components: { Bread, ShopLi },
  data() {
    return {
      search:null,//搜索数据
      category: null, // 分类列表
      currentPage: 1, // 当前页
      pagesize: 15, //每页条数
      total:null,//总条数
      categoryActive:0,//标签页的标识  第几个
      allProductList:null,//全部商品 渲染
      categoryID:[],//参数ID
    };
  },

  activated() {
    //获取导航栏的列表数据
    this.getCategory();
    //获取全部的数据   不加参数默认获取标签页对应的参数
    this.getProduct('getAllProduct')
    // 搜索数据 
    // this.getProductBySearch()
  },
  methods: {
    // 获取分类列表数据
    async getCategory() {
      let { data: res } = await Goods.getCategory();
      // console.log(res);
      this.category = res.category;
      // 用方法把'全部'加到数组开头
      this.category.unshift({
        category_id:0,
        category_name:"全部"
      })
    },
    // 获取全部商品/ / 其他数据 
    async getProduct(text="getProductByCategory") {
      //先初始化一个变量 放入传递的参数
      let data = {categoryID: this.categoryID, currentPage: this.currentPage, pageSize: this.pagesize}
      let { data: res } = await Goods[text](data);
      //获取列表数据
      this.allProductList = res.Product
      //获取总条数
      this.total = res.total
      // console.log(res)
    },
    // 分页
    handleCurrentChange(currentPage){
      // console.log('分页')
      this.currentPage = currentPage
    },
    // 搜索数据
    async getProductBySearch(){
      let sendData = {
        search: this.search,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }
      let {data:res} = await Goods.getProductBySearch(sendData)
      //获取列表数据
      this.allProductList = res.Product
      //获取总条数
      this.total = res.total
      // console.log(res)
    }
  },
  watch:{
    //监听标签页的标识 改变就渲染对应的数据
    categoryActive(val){
      // console.log(val)
      //先把参数给予对应的值
      let categoryID = val
      this.categoryID = [categoryID]
      // 每次切换都要重置到第一页
      this.currentPage = 1
      this.total = 0
      // 
      if(val == 0){//如果val是0就给一个[] 然后获取全部数据
        this.categoryID = []
        this.getProduct('getAllProduct')
      }else{//否则就获取val对应的数据
        this.getProduct()
      }
    },
    //如果页数改变就同步改变数据的渲染
    currentPage(val){
      this.getProduct('getAllProduct')
    },
    $route(val){
      // console.log(val.query.categoryID)
      if(val.query.categoryID){
        this.categoryID = val.query.categoryID
        this.getProduct()
        return
      }
        this.search = val.query.search
        this.getProductBySearch()
      
    }
  }
};
</script>

<style lang='scss'>

.el-tabs{
    background:#fff;

  }
  .el-tabs__nav-scroll{
    padding: 0 8%;
  }
.el-pagination{
  text-align: center;
  background:#f5f5f5;
}
.h1{
  height:1000px;
  background:#f5f5f5;
}
</style>